<template>
  <div class="table-container">
    <input v-model="searchTitle" placeholder="搜索书名">
    <button @click="searchBook">搜索</button>

    <table>
      <tr>
        <th>书名</th>
        <th>作者</th>
        <th>出版日期</th>
        <th>库存数量</th>
      </tr>
      <tr v-for="book in books" :key="book.id">
        <td>{{ book.title }}</td>
        <td>{{ book.author }}</td>
        <!-- 在这里调用 formatDate 方法来格式化日期 -->
        <td>{{ formatDate(book.publicationDate) }}</td>
        <td>{{ book.stockQuantity }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchTitle: '',
      books: []
    };
  },
  methods: {
    searchBook() {
      axios.get(`/api/book/search`, { params: { title: this.searchTitle } })
          .then(response => {
            this.books = response.data;
          })
          .catch(error => {
            console.error(error);
          });
    },
    // 新增 formatDate 方法用于处理日期格式
    formatDate(dateStr) {
      if (!dateStr) return ''; // 如果日期字符串不存在，返回空字符串
      // 将日期字符串转换为Date对象，然后格式化为YYYY-MM-DD格式
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始计数
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`; // 使用模板字符串返回格式化的日期
    }
  }
}
</script>

<style>
/* 你的CSS样式保持不变 */
.table-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
table {
  margin-top: 20px;
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 8px;
  text-align: center;
}
th {
  background-color: #f2f2f2;
}
</style>
